<template>
  <el-dialog
    :title="$t('msg.universal.title')"
    :modal-value="modelValue"
    @close="closed"
    width="22%"
  >
    <div class="content">
      <p class="title">{{ $t('msg.theme.themeColorChange') }}</p>
      <el-color-picker
        v-model="myColor"
        :predefine="predefineColors"
      ></el-color-picker>
    </div>
    <template #footer>
      <el-button @click="closed">{{ $t('msg.universal.cancel') }}</el-button>
      <el-button type="primary" @click="confirm">{{
        $t('msg.universal.confirm')
      }}</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { defineProps, defineEmits, ref } from 'vue'
import { useStore } from 'vuex'
import { generateNewStyle, writeNewStyle } from '@/utils/theme'
defineProps({
  modalValue: {
    type: Boolean,
    required: true
  }
})
const store = useStore()
const emits = defineEmits('update:modelValue')
const closed = () => {
  emits('update:modelValue', false)
}

const myColor = ref(store.getters.mainColor)

const confirm = async () => {
  const newStyle = await generateNewStyle(myColor.value)
  writeNewStyle(newStyle)
  store.commit('theme/setMainColor', myColor.value)
  closed()
}

// 预定义色值
const predefineColors = [
  '#2d3a4b',
  '#485148',
  '#4B4004',
  '#1E88E5',
  '#2E241B',
  '#20222A',
  '#03152A',
  '#50314F',
  '#344058 ',
  '#3A3D49 ',
  '#20222A ',
  '#28333E',
  '#24262F'
]
</script>

<style lang="scss" scoped>
.content {
  text-align: center;

  .title {
    margin-bottom: 12px;
  }
}
</style>
